<?php
require_once('common_view_functions.php');
?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?php echo(lang('n8_mgmt_start_pageTitle')); ?></title>
<link rel="shortcut icon" href="/img/favicon.ico" />
<link rel="stylesheet" type="text/css" href="/css/mgmt.css" />
<link rel="stylesheet" type="text/css" href="/css/emotag.css" />
<link rel="stylesheet" type="text/css" href="/css/3rd/jqModal.css" />
</head>
<body id="bodyDashboard">
<div id="wrapper">
	<!-- header -->
	<?php require('common_header.php'); ?>
	<!-- /header -->
	
	<div id="body">
		<div id="side">
			<h4 id="emoTagLogo"><em>emo</em><strong>Tag</strong> ~ <?php echo(lang('n8_mgmt_start_emoTagSlogan')); ?></h4>
			<form id="frmEmoTag" name="frmEmoTag">
				<div id="emoTextArea">
					<textarea id="txtEmoTagText" name="txtEmoTagText" rows="3" class="textBox"></textarea>
					<div style="text-align:right;">
						<a href="javascript:;" id="lnkChooseEmo"><?php echo(lang('n8_mgmt_start_selectEmo')); ?></a>
						<input type="button" id="btnPostEmoTag" name="btnPostEmotag" class="button" value="<?php echo(lang('n8_mgmt_start_emoTagUpdateButtonText')); ?>" />
					</div>
				</div>
				<div id="emoIconArea">
					<table cellpadding="0" cellspacing="0" id="tblEmo1" style="display:none;">
						<tr>
							<td><img alt="BB1" src="/img/bbx/BB1.gif" /></td>
							<td><img alt="BB2" src="/img/bbx/BB2.gif" /></td>
							<td><img alt="BB3" src="/img/bbx/BB3.gif" /></td>
							<td><img alt="BB4" src="/img/bbx/BB4.gif" /></td>
							<td><img alt="BB5" src="/img/bbx/BB5.gif" /></td>
						</tr>
						<tr>
							<td><img alt="BB6" src="/img/bbx/BB6.gif" /></td>
							<td><img alt="BB7" src="/img/bbx/BB7.gif" /></td>
							<td><img alt="BB8" src="/img/bbx/BB8.gif" /></td>
							<td><img alt="BB9" src="/img/bbx/BB9.gif" /></td>
							<td><img alt="BB10" src="/img/bbx/BB10.gif" /></td>
						</tr>
						<tr>
							<td><img alt="BB11" src="/img/bbx/BB11.gif" /></td>
							<td><img alt="BB12" src="/img/bbx/BB12.gif" /></td>
							<td><img alt="BB13" src="/img/bbx/BB13.gif" /></td>
							<td><img alt="BB14" src="/img/bbx/BB14.gif" /></td>
							<td><img alt="BB15" src="/img/bbx/BB15.gif" /></td>
						</tr>
						<tr>
							<td><img alt="BB16" src="/img/bbx/BB16.gif" /></td>
							<td><img alt="BB17" src="/img/bbx/BB17.gif" /></td>
							<td><img alt="BB18" src="/img/bbx/BB18.gif" /></td>
							<td><img alt="BB19" src="/img/bbx/BB19.gif" /></td>
							<td><img alt="BB20" src="/img/bbx/BB20.gif" /></td>
						</tr>
						<tr>
							<td><img alt="BB21" src="/img/bbx/BB21.gif" /></td>
							<td><img alt="BB22" src="/img/bbx/BB22.gif" /></td>
							<td><img alt="BB23" src="/img/bbx/BB23.gif" /></td>
							<td><img alt="BB24" src="/img/bbx/BB24.gif" /></td>
							<td><img alt="BB25" src="/img/bbx/BB25.gif" /></td>
						</tr>
						<tr>
							<td><img alt="BB26" src="/img/bbx/BB26.gif" /></td>
							<td><img alt="BB27" src="/img/bbx/BB27.gif" /></td>
							<td><img alt="BB28" src="/img/bbx/BB28.gif" /></td>
							<td><img alt="BB29" src="/img/bbx/BB29.gif" /></td>
							<td><img alt="BB30" src="/img/bbx/BB30.gif" /></td>
						</tr>
						<tr>
							<td><img alt="BB31" src="/img/bbx/BB31.gif" /></td>
							<td><img alt="BB32" src="/img/bbx/BB32.gif" /></td>
						</tr>
					</table>
				</div>
			</form>
			<div id="emoTagsWrapper"></div>
			<div id="emoTagPagingPanel">
				<a href="javascript:;" rel="prev">&laquo;</a>
				<span>Loading...</span>
				<a href="javascript:;" rel="next">&raquo;</a>
			</div>
			<p id="im_code"><?php echo($emotag_im_linking_code); ?></p>
		</div>
		<div id="main">
			<div id="act_stream">
				<img alt="UC" src="/img/under_construction_b1.jpg" style="width:320px;height:320px;border:8px solid #b0c4de;" />
			</div>
			<div id="quick_access">
				<dl>
					<dt id="newPost"><a href="<?php echo(base_url() . $blogger_uri . '/mgmt/edit_entry'); ?>"><?php echo(lang('n8_mgmt_start_quickAddEntryTitle')); ?></a></dt>
					<dd><?php echo(lang('n8_mgmt_start_quickAddEntryDesc')); ?></dd>
					<dt id="doSettings"><a href="<?php echo(base_url() . $blogger_uri . '/mgmt/settings'); ?>"><?php echo(lang('n8_mgmt_start_quickDoSettingsTitle')); ?></a></dt>
					<dd><?php echo(lang('n8_mgmt_start_quickDoSettingsDesc')); ?></dd>
				</dl>
			</div>
			<div class="z"></div>
		</div>
		<div class="z"></div>
	</div>
	<!-- footer -->
	<?php require('common_footer.php'); ?>
	<!-- /footer -->
</div>

<!-- JS -->
<script type="text/javascript" src="/js/3rd/jquery.pack.js"></script>
<script type="text/javascript" src="/js/3rd/jqModal.js"></script>
<script type="text/javascript" src="/js/3rd/json2.js"></script>
<script type="text/javascript">
<!--
var g_userSiteRoot = "<?php echo('/' . $blogger_uri); ?>";

var loadEmoTagPageDone = false;
var prevPg = 0;
var nextPg = 0;

var emoTagPostData = {
	"selected": true,
	"icon": "BB0",
	"text": ""
};

var delEmoTagConfirm = "<?php echo(lang('n8_mgmt_start_emoTagDeleteConfirm')); ?>";

function loadEmoTagList(pg) {
	$("#ajaxLoading").show();
	
	$("#emoTagsWrapper").load(g_userSiteRoot + "/mgmt/emotag/" + pg, {
		"R": Math.random(),
		"D": "J"
	}, function() {
		$("#ajaxLoading").hide();
		var pagingInfo = $("#hidEmoTagPaging").val();
		pagingInfo = pagingInfo.split("|");
		if(pagingInfo[1] == "1/0") {
			$("#emoTagPagingPanel").hide();
		} else {
			prevPg = pagingInfo[0];
			$("#emoTagPagingPanel span").text(pagingInfo[1]);
			nextPg = pagingInfo[2];
		}
		
		loadEmoTagPageDone = true;
		
		$("div.del_emotag_wrpr a").click(function() {
			if(confirm(delEmoTagConfirm)) {
				var emoTagId = $(this).attr("rel");
				deleteEmoTag(emoTagId);
			}
		});		
	});
}

function deleteEmoTag(etgId) {
	$("#ajaxLoading").show();
	$.post(g_userSiteRoot + "/mgmt/emotag/0", {
		"hidIsPostBack": "ja",
		"oper": "delete",
		"id": etgId
	}, deleteEmoTagCallback);
}

function deleteEmoTagCallback(rdata) {
	$("#ajaxLoading").hide();
	rdata = rdata.split("_");
	if(rdata[0] != "SUCC") {
		alert("Operation failed!");
		return;
	}
	loadEmoTagList(0);
}

function postEmoTagCallback(rdata) {
	$("#ajaxLoading").hide();
	rdata = rdata.split("_");
	if(rdata[0] != "SUCC") {
		alert("Operation failed!");
		return;
	}
	$("#txtEmoTagText").val("");
	$("#txtEmoTagText").css("background", "");
	emoTagPostData.selected = true;
	emoTagPostData.icon = "BB0";
	emoTagPostData.text = "";
	loadEmoTagList(0);
}

$(document).ready(function() {
	$("#lnkChooseEmo").click(function() {
		$("#tblEmo1").toggle();
	});
	
	$("#tblEmo1 img").click(function() {
		var bgStyle = "#fff url(/img/bbx/{0}.gif) no-repeat 100% 100%";
		var selectedEmo = $(this).attr("alt");
		bgStyle = bgStyle.replace("{0}", selectedEmo);
		$("#txtEmoTagText").css("background", bgStyle);
		
		emoTagPostData.selected = true;
		emoTagPostData.icon = selectedEmo;
		
		$("#tblEmo1").hide();
	});
	
	$("#btnPostEmoTag").click(function() {
		if(!emoTagPostData.selected) {
			alert("<?php echo(lang('n8_mgmt_start_emoTagSelectIcon')); ?>");
			return;
		}
		var emoText = $("#txtEmoTagText").val();
		if(emoText.length < 1) {
			alert("<?php echo(lang('n8_mgmt_start_emoTagNoText')); ?>");
			return;
		}
		if(emoText.length > 128) {
			// currently max length is 128
			alert("<?php echo(lang('n8_mgmt_start_emoTagTextTooLong')); ?>");
			return;
		}
		emoTagPostData.text = emoText;
		$("#ajaxLoading").show();
		$.post(g_userSiteRoot + "/mgmt/emotag/0", {
			"hidIsPostBack": "ja",
			"oper": "add",
			"posted_data": JSON.stringify(emoTagPostData)
		}, postEmoTagCallback);
	});
	
	$("#emoTagPagingPanel a").click(function() {
		if(!loadEmoTagPageDone) {
			return;
		}
		var way = $(this).attr("rel");
		$("#emoTagPagingPanel span").text("Loading...");
		if(way == "prev") {
			loadEmoTagList(prevPg);
		} else if(way == "next") {
			loadEmoTagList(nextPg);
		}
	});
	
	loadEmoTagList(0);
	
	$("#txtEmoTagText").focus();
});
// -->
</script>
<!-- /JS -->

<div id="ajaxLoading"><img alt="Loading..." src="/img/ajax_loading.gif" border="0" width="24" height="24" /></div>
</body>
</html>
